<!-- 查看表单 -->

<template>
  <div>
    <AddStep />

    <Step1 v-if="one.step === 1" />

    <Step2IP v-else-if="GETTER.hasIP" />

    <Step2 v-else />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

const HAS_IP = ['1', '2', '3', '4']

const EMPTY = {
  ipAddress: '',
  mac: '',
  // 其他字段待完善
}

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'FormAdd',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听设备类别
     */
    'one.deviceCategoryId'(newId, oldId) {
      const { isAdd, one } = this

      // 新增弹窗，从有IP切换为无IP，第二步中已填的IP等字段需要清空
      if (isAdd && HAS_IP.includes(oldId) && !HAS_IP.includes(newId)) CORE.merge(one, EMPTY)
    },
  },
}
</script>
